<template>
    <view class="form-container">
        <view class="form-main">
            <view v-if="formName"
                class="form-asterisk-wrap">{{ mustInput ? '*' : '' }}</view>
            <view v-if="formName"
                class="form-title-wrap">{{ formName }}:</view>

            <!-- formType == '1'单选功能 -->
            <picker v-if="formType == '1'"
                class="pick-wrap"
                :range="dicArray"
                :value="index"
                :range-key="'name'"
                @change="bindChange"
                :disabled="formEnable"
            >
                <view class="show-value"
                    :class="{ 'show-value-p': !nameValues }">
                    {{
                        formEnable ? (nameValues ? nameValues : '无')
                            : (nameValues ? nameValues : `请选择${formName}`)
                    }}
                </view>
            </picker>
            <!-- formType == '1'单选功能 end -->

            <!-- formType == '2'多选功能 -->
            <checkbox-group v-else-if="formType == '2'"
                class="form-choose-group"
                @change="checkboxChange"
            >
                <view class="form-choose-radio"
                    v-for="(item, index) in dicArray"
                    :key="index">
                    <view class="form-choose-radio-container">
                        <view>
                            <view>
                                <checkbox :value="item.value"
                                    :checked="item.checked"
                                    :disabled="formEnable" />
                            </view>
                        </view>
                        <view>{{ item.name }}</view>
                    </view>
                </view>
            </checkbox-group>
            <!-- formType == '2'多选功能 end -->

            <!-- formType == '3'单行输入功能 -->
            <input v-else-if="formType == '3'"
                class="form-input-content-wrap"
                placeholder-class="form-input-content-placeholder-wrap"
                :type="inputType"
                :maxlength="maxLength"
                :disabled="formEnable"
                :placeholder="(formEnable ? '无' : `请输入${formName}`)"
                :value="values"
                @input="inputChange" />

            <!-- formType == '6' || '7'日期选取 -->
            <view v-else-if="formType == '6' || formType == '7'"
                class="show-value"
                :class="{ 'show-value-p': !nameValues }"
                @click.native="showCalendar()">
                {{
                    formEnable ? (nameValues ? nameValues : '无')
                    : (nameValues ? nameValues : `请选择${formName}`)
                }}
            </view>
            <mx-date-picker v-if="formType == '6' || formType == '7'"
                :show="mxDateInfo.showPicker"
                :type="mxDateInfo.type"
                :value="values"
                :format="mxDateInfo.formatter"
                :showTips="mxDateInfo.showTips"
                :beginText="mxDateInfo.beginText"
                :endText="mxDateInfo.endText"
                :showSeconds="mxDateInfo.showSeconds"
                :showHoliday="mxDateInfo.showHoliday"
                :endDate="endDate"
                @confirm="mxDateConfirm"
                @cancel="mxDateCancel" />

            <!-- formType == '9' tag单选 -->
            <view class="form-choose-group1"
                v-if="formType == '9'">
                <uni-data-checkbox mode="tag"
                    :disabled="formEnable"
                    :localdata="dicArray"
                    v-model="values"
                    :map="dictionaryMap"
                    @change="radioChange()"
                ></uni-data-checkbox>
            </view>
            <!-- formType == '9' tag单选 end -->

            <!-- formType == '10' tag多选 -->
            <view class="form-choose-group1"
                v-if="formType == '10'">
                <uni-data-checkbox mode="tag"
                    :disabled="formEnable"
                    :localdata="dicArray"
                    :multiple="true"
                    v-model="values"
                    :map="dictionaryMap"
                    @change="checkboxChange1()"
                ></uni-data-checkbox>
            </view>
            <!-- formType == '10' tag多选 end -->

            <!-- <uni-calendar
                ref="calendar"
                :clearDate="false"
                :date="dataInfo.date"
                :insert="dataInfo.insert"
                :lunar="dataInfo.lunar"
                :startDate="dataInfo.startDate"
                :endDate="dataInfo.endDate"
                :range="dataInfo.range"
                @confirm="dateConfirm" /> -->
            <!-- <uni-datetime-picker
                v-else-if="formType == '6' || formType == '7'"
                :value="values"
                :type="dateTimeInfo.type"
                :return-type="dateTimeInfo.returnType"
                :start="dateTimeInfo.start"
                :end="dateTimeInfo.end"
                :rangeSeparator="dateTimeInfo.rangeSeparator"
                :placeholder="dateTimeInfo.placeholder"
                :startPlaceholder="dateTimeInfo.startPlaceholder"
                :endPlaceholder="dateTimeInfo.endPlaceholder"
                :border="dateTimeInfo.border"
                :disabled="dateTimeInfo.disabled"
                :clear-icon="dateTimeInfo.clearIcon"
                :hide-second="dateTimeInfo.hideSecond"
                @change="dateTimeConfirm" /> -->
            <!-- formType == '6' || '7'日期选取 end -->

            <image v-if="rightImage && rightShow"
                class="rigth-image"
                @click.native="rightCick()"
                :src="rightImage" />
        </view>

        <!-- formType == '5'附件功能，暂未开发 -->
        <view v-if="formType == '5'"
            class="attachment-area">
            <view class="attachment-area-item"
                v-for="(nItem, nIndex) in nameValues"
                :key="`nameValues${nIndex}`">
                <img class="image-style"
                    :src="nItem.filepath"
                    @click="previewImage(nameValues, nIndex, '0')" />
                <image v-if="!formEnable"
                    class="image-delete"
                    :src="'/static/imgs/icon/clo.png'"
                    @click="deleteFile(nIndex, nItem, nameValues, '0')">
                </image>
            </view>
            <view class="attachment-area-item"
                v-for="(item, aIndex) in values"
                :key="`values${aIndex}`">
                <img class="image-style"
                    :src="item.src"
                    @click="previewImage(values, aIndex, '1')" />
                <image v-if="!formEnable"
                    class="image-delete"
                    :src="'/static/imgs/icon/clo.png'"
                    @click="deleteFile(aIndex, item, values, '1')">
                </image>
            </view>
            <ray-pick-files v-if="!formEnable && ((values.length + nameValues.length) < fileSize)"
                :menuType="fileMenuType"
                :bizType="bizType"
                :fileGroup="fileGroup"
                @filePickedChange="filePickedChange"
                :filePicked="'filePickedChange'">
            </ray-pick-files>
        </view>
        <!-- formType == '5'附件功能 end -->

        <!-- formType == '4'多行输入功能 -->
        <textarea v-if="formType == '4'"
            class="text-area-input"
            :value="values"
            :placeholder="(formEnable ? '无' :
                (rightImageFunc && rightImageFunc == '1') ? `请选取${formName}` : `请输入${formName}`)"
            :maxlength="maxLength"
            :disabled="areaEnable"
            @input="inputChange" />
        <view v-if="formType == '4'"
            class="text-area-count"
        >
            {{ values ? values.length : 0 }}/{{ maxLength }}
        </view>
        <view class="text-area-dic" v-if="formType == '4' && dicArray.length > 0">
            <view v-for="(dic, index) in dicArray"
                :key="`dicArray${index}`"
                class="text-area-dic-item"
                :class="[ (values && values.indexOf(dic.name) > -1) ? 'text-area-dic-item-choose' : '' ]"
                @click.native="dicArrayClick(dic)"
            >
                {{ dic.name }}
            </view>
        </view>
        <!-- formType == '4'多行输入功能 end -->

        <!-- formType == '8'组织机构人员选取功能 -->
        <view v-if="formType == '8'"
            class="from-organizational"
        >
            <view v-for="(val, index) in nameValues"
                :key="`nameValue${index}`"
                class="from-organizational-item"
            >
                <view>{{ val.name }}</view>
                <view class="from-organizational-item-container">
                    <view v-for="(usr, uIndex) in val.children"
                        :key="`user${uIndex}`"
                        class="from-organizational-item-user"
                    >
                        <view v-if="usr.username">{{ usr.businessname }}-{{ usr.username }}</view>
                        <view v-if="usr.roleName">{{ usr.roleName }}</view>
                        <view v-if="usr.userName">{{ usr.userName }}</view>
                    </view>
                </view>
            </view>
        </view>
        <!-- formType == '8'组织机构人员选取功能 end -->

        <!-- showOject底部显示内容 add by ray on 2021/10/27 -->
        <view v-if="showOject"
            class="from-show-object"
        >
            <view v-for="(item, index) in showOject"
                :key="`showOject${index}`"
                class="from-show-object-item"
                :class="{'from-show-object-item-top': 'index != 0'}"
            >
                <view>{{ item.updateTime }}</view>
                <view>{{ item.js }}-{{ item.updateUser }}</view>
                <view>{{ item.result }}</view>
                <!-- <view class="from-organizational-item-container">
                    <view v-for="(usr, uIndex) in val.children"
                        :key="`user${uIndex}`"
                        class="from-organizational-item-user"
                    >
                        <view v-if="usr.username">{{ usr.businessname }}-{{ usr.username }}</view>
                        <view v-if="usr.roleName">{{ usr.roleName }}</view>
                        <view v-if="usr.userName">{{ usr.userName }}</view>
                    </view>
                </view> -->
            </view>
        </view>
        <!-- showOject底部显示内容 end -->

    </view>
</template>

<script>
import uniCalendar from '@/components/uni-calendar/uni-calendar.vue';
import uniDateTimePicker from '@/components/uni-datetime-picker/uni-datetime-picker.vue';
import mxDatePicker from '@/components/mx-datepicker/mx-datepicker.vue';
import TimeUtils from '@/utils/timeUtils.js';
import { RayPickFiles } from "@/components/ray-pick-files/ray-pick-files.vue";
import { fileUrl } from "../../../api/config.js";
export default {
    name: 'ray-form',
    components: {
        uniCalendar,
        uniDateTimePicker,
        mxDatePicker,
        RayPickFiles,
    },
    props: {

        /**
         * 自定义表单类型
         * 1单选
         * 2多选
         * 3单行文本
         * 4多行文本
         * 5附件
         * 6时间
         * 7时间段
         * 8组织机构人员选取 add by ray on 2021/09/13
         * 9 tag类型 单选
         * 10 tag类型 多选
         * 默认为单选
         */
        formType: {
            type: [String, Number],
            default() {
                return 1;
            }
        },

        /**
         * 右侧按钮
         * add by ray on 2021/09/06
         */
        rightImage: {
            type: String,
            default: ''
        },

        /**
         * rightImage按钮点击事件，自己定义处理，这里需要添加值说明
         * 1地图选取功能
         */
        rightImageFunc: {
            type: [String, Number],
            default() {
                return "";
            }
        },

        /**
         * 输入类型
         */
        inputType: {
            type: String,
            default: 'text'
        },

        /**
         * 最大输入长度
         */
        maxLength: {
            type: Number,
            default: 500
        },

        /**
         * 是否带星号
         */
        mustInput: {
            type: Boolean,
            default: false
        },

        /**
         * 表单id
         */
        formId: {
            type: String
        },

        /**
         * 时间控件类型，默认为date
         * 详细配置参见mxDateInfo.type
         */
        dateType: {
            type: String,
            default() {
                return "date";
            }
        },

        /**
         * 表单属性
         */
        formAttribute: {
            type: String
        },

        /**
         * 表单默认值
         */
        formValue: {
            // type: String,
            // default() {
            //     return '';
            // }
        },

        /**
         * 表单默认值
         */
        formShowValue: {
            // type: String,
            // default() {
            //     return '';
            // }
        },

        /**
         * 自定义表单名称
         */
        formName: {
            type: String,
            default() {
                return '表单名称';
            }
        },

        /**
         * 数据字典
         */
        dicArray: {
            type: Array,
            default() {
                return [];
            }
        },
        /**
         * 回调函数方法名，默认为formCallback
         */
        formCallback: {
            type: String,
            default() {
                return 'formCallback';
            }
        },
        /**
         * 回调函数方法名，默认为rightCallback
         */
        rightCallback: {
            type: String,
            default() {
                return 'rightCallback';
            }
        },
        /**
         * 是否禁用
         */
        formEnable: {
            type: Boolean,
            default: false
        },
        /**
         * 表单位置
         */
        positions: {
            type: Array,
            default() {
                return [];
            }
        },

        /**
         * 最大附件数
         * add by ray on 2021/09/07
         */
        fileSize: {
            type: Number,
            default: 2
        },

        /**
         * 附件菜单类型
         * 默认为0，只支持图片, 1增加语音支持和视频支持
         * add by ray on 2021/09/07
         */
        fileMenuType: {
            type: String,
            default() {
                return '0';
            }
        },

        /**
         * 附件id，回显时使用
         * add by ray on 2021/09/07
         */
        bizId: {
            type: String,
            default() {
                return '';
            }
        },
        /**
         * 附件分类
         * add by ray on 2021/09/07
         */
        bizType: {
            type: String,
            default() {
                return 'fileType';
            }
        },
        /**
         * 附件分类分组
         * add by ray on 2021/09/07
         */
        fileGroup: {
            type: String,
            default() {
                return '0';
            }
        },
        associated: {
            type: Array,
            default() {
                return [];
            }
        },

        /**
         * 设置数据实体model
         * add by ray on 2021/10/12
         */
        setModel: {
            type: [Object, Array],
        },

        /**
         * 设置显示数据实体model
         * add by ray on 2021/10/27
         */
        showOject: {
            type: [Object, Array],
        },
        /**
         * 时间选择组件 限制选择器选择的最大时间
         * add by sunqing on 2021/10/28
         */
        endDate: {
            type: Date,
        },
    },
    watch: {
        /**
         * 增加父组件数据更新监听
         * add by ray on 2021/09/06
         */
        formValue(newVal, oldVal) {
            let __this = this;
            if (newVal != oldVal) {
                __this.values = newVal;
                __this.initValue();
            }
        },
        formShowValue(newVal, oldVal) {
            let __this = this;
            console.log(newVal);
            // if (newVal != oldVal) {
                __this.nameValues = newVal;
            // }
        },
        bizId(newVal, oldVal) {
            let __this = this;
            if (newVal != oldVal) {
                __this.initValue();
            }
        },
        /**
         * 编辑功能监听
         * add by ray on 2021/10/11
         */
        formEnable(newVal, oldVal) {
            let __this = this;
            /**
             * 编辑功能初始化
             * add by ray on 2021/10/11
             * 添加定位功能显示逻辑
             * modify by ray on 2021/10/12
             */
            __this.rightShow = (__this.formEnable && (!__this.rightImageFunc || __this.rightImageFunc != "1")) ? false : true;
            __this.areaEnable = (__this.formEnable || (__this.rightImageFunc &&  __this.rightImageFunc == "1")) ? true : false;
        },

        /**
         * 监听地图存储变化
         */
        mapData: {
            handler(val) {
                let __this = this;
                if (__this.formEnable) {
                    // 禁用则不可修改
                    return;
                }
                if (val && val.formId && val.formId == __this.formId && val.BZDZ) {
                    __this.model = val;
                    if (__this.rightImageFunc == "1") {
                        __this.values = val.BZDZ;
                        __this.nameValues = val.BZDZ;
                    }
                    __this.broadcastEvent();
                }
            },
            immediate: true,
            deep: true,
        },
        /**
         * model变化
         */
        setModel: {
            handler(val) {
                let __this = this;
                if (val) {
                    __this.model = val;
                }
            },
            immediate: true,
            deep: true,
        },
    },
    computed: {
        mapData() {
            return this.$store.state.mapData;
        },
    },
    data() {
        return {
            // 选中的索引，单选时使用
            index: 0,

            dicItem: {}, // 单选功能选中的数据字典
            // 右边按钮显示
            rightShow: true,

            // 日期选取
            dataInfo: {
                // 选中时间，默认为今天
                date: '',
                // 是否显示农历
                lunar: false,
                // 是否范围选取
                range: false,
                // 插入模式,可选值，ture：插入模式；false：弹窗模式；默认为插入模式
                insert: false,
                // 是否显示月份为背景，默认为true
                showMonth: true,
                selected: []
            },
            // dateTimePicker配置
            dateTimeInfo: {
                // 选择器类型，默认datetime[date/daterange/datetime/datetimerange]
                type: "date",
                start: "",
                end: "",
                // 返回值格式,默认为string[timestamp 、string、date]
                returnType: "string",
                // 是否有边框
                border: false,
                // 时间范围分隔符
                rangeSeparator: "-",
                placeholder: "",
                startPlaceholder: "",
                endPlaceholder: "",
                // 是否禁用
                disabled: false,
                // 是否显示清除按钮
                clearIcon: false,
                // 是否显示秒
                hideSecond: false,
            },
            // mx-datePicker配置
            mxDateInfo: {
                // 是否显示时间选取组件
                showPicker: false,
                // 选择器类型，date（日期）、time（时间）、datetime（日期时间）、range（日期范围）、rangetime（日期时间范围）
                type: "date",
                // 时间范围分隔符
                rangeSeparator: "-",
                // start: "",
                // end: "",
                beginText: "开始",
                endText: "结束",
                // 是否显示提示文字（type为range/rangetime时生效）
                showTips: true,
                // 是否显示秒
                showSeconds: true,
                // 是否显示公历节日
                showHoliday: false,
                // 选择控件的颜色
                color: "",
                formatter: "yyyy-mm-dd hh:ii:ss",
            },

            values: "",
            nameValues: "",
            // 自定义数据体 add by ray on 2021/09/08
            model: "",
            // tag 单选 字典项显示字段 及取值字段
            dictionaryMap: {
                text: 'name',
                value: 'value'
            },

            // 输入区域 add by ray on 2021/10/21
            areaEnable: false,
        };
    },
    onLoad() { },
    created() {
        console.log('this.endDate')
        console.log(this.endDate)
        this.initComponent();
        this.initValue();
    },
    mounted() {
    },
    updated() {
    },
    onShow() { },
    methods: {
        /**
         * 多行输入文本提示功能
         */
        dicArrayClick(item) {
            let __this = this;
            if (__this.formEnable) {
                // 禁用则不可修改
                return;
            }
            let len = 0;
            if (!__this.values) {
                __this.values = "";
            }
            if (__this.values) {
                len = __this.values.length;
            }
            if (__this.values.indexOf(item.name) > -1) {
                __this.values = __this.values.replace(item.name, "");
            } else {
                let size = item.name.length;
                if (__this.maxLength < (len + item.name.length)) {
                    size = __this.maxLength - len;
                }
                __this.values += item.name.substring(0, size);
            }
            __this.nameValues = __this.values;
            // 强化inputChange未响应问题 modify by ray on 2021/10/12
            __this.broadcastEvent();
        },

        /**
         * 组件初始化
         */
        initComponent() {
            let __this = this;
            if (__this.formType == "7") {
                __this.dataInfo.range = true;
            }
            if (__this.formType == "6" || __this.formType == "7") {
                __this.dateTimeInfo.placeholder = `请选取${__this.formName}`;
                if (__this.dateType) {
                    __this.mxDateInfo.type = __this.dateType;
                }
            }
            /**
             * 编辑功能初始化
             * add by ray on 2021/10/11
             * 添加定位功能显示逻辑
             * modify by ray on 2021/10/12
             */
            __this.rightShow = (__this.formEnable && (!__this.rightImageFunc || __this.rightImageFunc != "1")) ? false : true;
            __this.areaEnable = (__this.formEnable || (__this.rightImageFunc &&  __this.rightImageFunc == "1")) ? true : false;
        },

        /**
         * 数据初始化
         */
        initValue() {
            let __this = this;
            if (__this.formValue) {
                // formType单选初始化 1单选 2多选
                if (__this.formType == "1" || __this.formType == "9") {
                    for (let i = 0; i < __this.dicArray.length; i++) {
                        let doc = __this.dicArray[i];
                        if (__this.formValue == doc.value) {
                            __this.dicItem = doc;
                            __this.nameValues = doc.name;
                            __this.values = doc.value;
                            __this.index = i;
                            break;
                        }
                    }
                } else if (__this.formType == "2" ) {
                    __this.initLabels(__this.formValue.split(","));
                } else if ( __this.formType == "10") {
                    // tag类型多选 回显数据
                    __this.nameValues = __this.formShowValue;
                    __this.values = [];
                    if (__this.formValue instanceof Array) {
                        __this.formValue.forEach(element => {
                            __this.values.push(element)
                        })
                    } else {
                        __this.formValue.split(",").forEach(element => {
                            __this.values.push(element)
                        })
                    }
                } else if (
                    __this.formType == "3"
                    || __this.formType == "4"
                    || __this.formType == "6"
                    || __this.formType == "7"
                    || __this.formType == "8"
                    || __this.formType == "5"
                ) {
                    __this.nameValues = __this.formShowValue;
                    __this.values = __this.formValue;
                }
            }
            if (__this.formType == "5") {
                __this.nameValues = [];
                if (__this.bizId) {
                    __this.attachments(__this.bizId, __this.bizType, __this.fileGroup);
                }
            }
        },

        /**
         * 数据回调，通知界面更新表单数据
         */
        broadcastEvent(method) {
            let __this = this;
            let obj = {
                formId: __this.formId,
                formType: __this.formType,
                formAttribute: __this.formAttribute,
                positions: __this.positions,
                associated: __this.associated
            };

            if (__this.values) {
                obj.values = __this.values;
            }
            if (__this.nameValues) {
                obj.nameValues = __this.nameValues;
            }
            if (__this.model) {
                obj.model = __this.model;
            }
            obj.formEnable = __this.formEnable;
            if (__this.rightImageFunc) {
                obj.rightImageFunc = __this.rightImageFunc;
            }
            __this.$emit(method ? method : __this.formCallback, obj);
        },

        rightCick() {
            let __this = this;
            __this.broadcastEvent(__this.rightCallback);
        },

		/**
		 * @description:value 改变时触发 change 事件
		 * @author ray
		 */
        bindChange(e) {
            let __this = this;
            __this.index = e.target.value;
            __this.dicItem = __this.dicArray[e.target.value];
            __this.values = __this.dicItem.value;
            __this.nameValues = __this.dicItem.name;
            __this.broadcastEvent();
        },

        /**
         * @description:某一列的值改变时触发 columnchange 事件
         * @author yaoyanhui
         */
        bindColumnchange(e) {
            console.log(e.detail)
            if (e.detail.column == 0) {
            }
        },

        /**
         * 多选功能回调
         * @param {Object}
         */
        checkboxChange: function (e) {
            let __this = this;
            __this.initLabels(e.target.value);
            __this.broadcastEvent();
        },
        /**
         * @description: tag 多选回调
         * @param {*}
         * @return {*}
         */
        checkboxChange1() {
            this.broadcastEvent();
        },
        /**
        * @description: tag 单选回调
        * @param {*}
        * @return {*}
        */
        radioChange() {
            this.broadcastEvent();
        },
        /**
         * 多选按钮初始化
         */
        initLabels(arr) {
            let __this = this;

            __this.values = "";
            __this.nameValues = "";
            arr.forEach((val) => {
                for (let i = 0; i < __this.dicArray.length; i++) {
                    let dic = __this.dicArray[i];
                    if (dic.value == val) {
                        __this.values += ((!__this.values ? "" : ",") + dic.value);
                        __this.nameValues += ((!__this.nameValues ? "" : ",") + dic.name);
                        break;
                    }
                }
            });

            if (
                __this.dicArray
                && __this.dicArray.length > 0
            ) {
                __this.dicArray.forEach((dic) => {
                    if (__this.values && __this.values.indexOf(dic.value) > -1) {
                        dic.checked = true;
                    } else {
                        dic.checked = false;
                    }
                });
            }
        },

        /**
         * 单行输入框回调
         * @param {Object}
         */
        inputChange: function (e) {
            let __this = this;
            __this.values = e.target.value;
            __this.broadcastEvent();
        },


        showCalendar() {
            if (this.formEnable) {
                return;
            }
            // this.$refs.calendar.open();
            this.mxDateInfo.showPicker = true;
        },

        /**
         * 日期选取-确定
         * @param {Object} e
         */
        dateConfirm(e) {
            let __this = this;
            console.log('confirm 返回:', e);
            __this.dataInfo.selected = e.range.data;
            if (!__this.dataInfo.range) {
                __this.values = e.fulldate;
                __this.nameValues = e.fulldate;
            } else {
                __this.values = "";
                __this.nameValues = "";
                if (e.range.before && e.range.after) {
                    if (TimeUtils.getDaysBetween(e.range.before, e.range.after) < 0) {
                        __this.values = `${e.range.after},${e.range.before}`;
                        __this.nameValues = `${e.range.after} 至 ${e.range.before}`;
                    }
                } else {
                    if (e.range.before) {
                        __this.values += e.range.before;
                        __this.nameValues += e.range.before;
                    }
                    if (e.range.after) {
                        __this.values += ((__this.values.length > 0 ? "," : "") + e.range.before);
                        __this.nameValues += ((__this.values.length > 0 ? " 至 " : "") + e.range.before);
                    }
                }
            }
            __this.broadcastEvent();
        },

        /**
         * dateTimePicker选取-确定
         * @param {Object} e
         */
        dateTimeConfirm(e) {
            let __this = this;
            console.log('confirm 返回:', e);
            __this.values = e;
            __this.nameValues = e;
            __this.broadcastEvent();
        },
        /**
         * mx-dateTime选取-确定
         */
        mxDateConfirm(e) {
            let __this = this;
            __this.mxDateInfo.showPicker = false;
            console.log('confirm 返回:', e);
            if (e) {
                // 选择的值
                console.log('value => ' + e.value);
                // 原始的Date对象
                console.log('date => ' + e.date);
                __this.values = e.value;
                if (e.value instanceof Array) {
                    __this.nameValues = `${e.value[0]}${__this.mxDateInfo.rangeSeparator}${e.value[1]}`;
                } else {
                    __this.nameValues = e.value;
                }
                __this.broadcastEvent();
            }
        },
        mxDateCancel() {
            let __this = this;
            __this.mxDateInfo.showPicker = false;
        },

        // 取附件
        attachments(bizId, bizType, fileGroup) {
            let __this = this;
            if (!__this.nameValues) {
                __this.nameValues = [];
            }
            __this.$api
                .attachments({
                    // accessToken: this.$store.state.loginData.accessToken,
                    bizId: bizId,
                    bizType: bizType,
                    fileGroup: fileGroup,
                    pageNumber: "1",
                    pageSize: __this.fileSize || "20",
                })
                .then(resp => {
                    if (resp.state) {
                        if (resp.data.length) {
                            resp.data.forEach(item => {
                                item.filepath = fileUrl + '/' + item.filepath;
                                __this.nameValues.push(item);
                            });
                        }
                    }
                });
        },

        /**
         * 网络图片预览
         * @param {Object} arrayList 附件列表
         * @param {Object} aIndex 附件pos
         * @param {Object} type 0网络图片，1本地图片
         */
        previewImage(arrayList, index, type) {
            let paths = [];
            console.log(arrayList, index);
            switch (type) {
                case "0":
                    arrayList.forEach((item) => {
                        paths.push(item.filepath);
                    });
                    // 预览图片
                    uni.previewImage({
                        urls: paths,
                        current: index,
                        // 图片指示器样式，可取值："default" - 底部圆点指示器； "number" - 顶部数字指示器； "none" - 不显示指示器。
                        indicator: "default",
                    });
                    break;
                case "1":
                    // TODO RAY 预览本地附件
                    break;
            }
        },

        /**
         * 删除附件
         * @param {Object} aIndex 附件pos
         * @param {Object} item 附件内容
         * @param {Object} arrayList 附件列表
         * @param {Object} type 0网络图片，1本地图片
         */
        deleteFile(aIndex, item, arrayList, type) {
            let __this = this;
            uni.showModal({
                title: "提示",
                content: "确定要删除该文件吗",
                success: function (res) {
                    if (res.confirm) {
                        console.log("用户点击确定");
                        switch (type) {
                            case "0":
                                // 删除已上传附件
                                __this.$api.attachmentDel(JSON.stringify([item.systemid])).then(resp => {
                                    if (resp.state) {
                                        uni.showToast({
                                            title: '删除成功！',
                                            icon: 'none'
                                        });
                                        __this.nameValues = __this.nameValues.filter(t => t.systemid != item.systemid);
                                    }
                                });
                                break;
                            case "1":
                                // fileType, image/auido/video 暂时未使用
                                if (item.fileType == "image") {

                                }
                                __this.values.some((t, i) => {
                                    if (t.src == item.src) {
                                        __this.values.splice(i, 1);
                                        // 在数组的some方法中，如果return true，就会立即终止这个数组的后续循环,所以相比较foreach，如果想要终止循环，那么建议使用some
                                        return true;
                                    }
                                });
                                break;
                        }
                    } else if (res.cancel) {
                        console.log("用户点击取消");
                    }
                },
            });
        },

        /**
         * 复查附件选取回调
         * @param {Object} val
         */
        filePickedChange(val) {
            let __this = this;
            console.log('附件选取回调', val);
            if (!__this.values) {
                __this.values = [];
            }
            __this.values.push(val);
            __this.broadcastEvent();
        },
    }
};
</script>
<style lang="scss" scoped>
.form-container {
    background-color: #ffffff;
    align-items: center;
    font-size: 28rpx;
    color: #666666;
    padding: 20rpx 10rpx;
    border-bottom: 1rpx solid #f5f5f5;
    width: 100%;
    // min-height: 88rpx;
    // margin: 0 10rpx;

    /*deep*/
    .uni-datetime-picker {
        flex: 1;
        font-size: 28rpx;
        color: #666666;
        margin-left: 10rpx;
    }
    // /*deep*/ .uni-datetime-picker-timebox {
    //     border: 0px solid #E5E5E5;
    // }

    .attachment-area {
        margin-top: 10rpx;
        border-radius: 5rpx;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: flex-start;

        .attachment-area-item-center {
            justify-content: center;
            align-items: center;
            background-color: #f5f5f5;
        }

        .attachment-area-item {
            width: 130rpx;
            height: 130rpx;
            padding: 5rpx;
            border-radius: 5rpx;
            margin: 15rpx;
            display: flex;
            position: relative;

            .image-style {
                width: 130rpx;
                height: 130rpx;
            }

            .image-add {
                width: 48rpx;
                height: 48rpx;
            }

            .image-delete {
                position: absolute;
                z-index: 10;
                font-size: 18px;
                color: #ee0a24;
                width: 48rpx;
                height: 48rpx;
                margin-left: 90rpx;
                margin-top: -20rpx;
            }

            .attachment-area-item-value {
                font-size: 26rpx;
                color: #666666;
                text-align: start;
            }
        }
    }

    .text-area-input {
        background-color: #f5f5f5;
        border-radius: 10rpx;
        display: block;
        flex: 1;
        width: 96%;
        padding: 15rpx;
        margin: 10rpx;
        height: 180rpx;
        font-size: 28rpx;
    }
    .text-area-count {
        position: relative;
        width: 100%;
        margin-top: -45rpx;
        padding-right: 25rpx;
        z-index: 21;
        text-align: right;
    }
    .text-area-dic {
        margin: 10rpx;

        .text-area-dic-item {
            display: inline-block;
            padding: 10rpx;
            margin-right: 10rpx;
            margin-top: 10rpx;
            // line-height: 40rpx;
            font-size: 28rpx;
            color: #666666;
            cursor: pointer;
            font-family: "microsoft yahei";
            border: 1rpx solid #f5f5f5;
            background-color: #f5f5f5;
            border-radius: 8rpx;
        }

        .text-area-dic-item-choose {
            border: 1rpx solid #3369e7;
            background-color: #ebf0fc;
            color: #3369e7;
        }
    }

    .from-organizational {
        margin: 10rpx;

        .from-organizational-item {
            font-size: 28rpx;
            color: #666666;
            padding: 0 20rpx;

            .from-organizational-item-container {
                display: flex-wrap;
                margin: 5rpx 0;

                .from-organizational-item-user {
                    margin: 5rpx;
                    border: 1rpx solid #808000;
                    background-color: #FFFFF0;
                    color: #666666;
                    display: inline-block;
                    border-radius: 8rpx;
                    padding: 5rpx 10rpx
                }

            }
        }
    }

    .from-show-object {
        margin: 10rpx;

        .from-show-object-item {
            background: #F0F8FF;
            border-radius: 8rpx;
            padding: 5rpx 10rpx;
            font-size: 24rpx;
            color: #666666;
        }

        .from-show-object-item-top {
            margin-top: 5rpx;
        }
    }

    .form-main {
        display: flex;
        align-items: center;
        font-size: 28rpx;
        color: #666666;
        // padding: 20rpx 10rpx;

        .rigth-image {
            height: 36rpx;
            width: 62rpx;
            padding: 0rpx 14rpx;
            margin-left: auto;
        }

        .form-asterisk-wrap {
            color: #ff0000;
            padding: 0 5rpx;
            width: 30rpx;
        }

        /*必输*标志样式*/
        .form-mustInput:before {
            content: "*";
            color: red;
            margin: 0 10rpx 0 0;
            width: 20rpx;
            height: 20rpx;
        }

        /*必输*标志样式*/
        .form-mustInputNo:before {
            content: "";
            color: red;
            margin: 0 10rpx 0 0;
            width: 20rpx;
            height: 20rpx;
        }

        .form-title-wrap {
            color: #666666;
        }

        .pick-wrap {
            color: #666666;
            flex: 1;
            margin-left: 10rpx;
        }

        .show-value {
            color: #666666;
            flex: 1;
            margin-left: 10rpx;
            font-size: 28rpx;
        }

        .show-value-p {
            color: #999999;
        }

        .form-choose-group {
            flex: 1;
            display: inline-block;
            padding: 10rpx 20rpx;
            .form-choose-radio {
                display: inline-block;
                flex: 1;
                margin-left: 10rpx;

                .form-choose-radio-container {
                    display: flex;
                    align-items: center;
                }
            }
        }
        .form-choose-group1 {
            flex: 1;
            padding: 0rpx 20rpx;
        }

        .form-input-content-wrap {
            margin-left: 10rpx;
            color: #666666;
            flex: 1;
            font-size: 28rpx;
            white-space: nowrap;
        }

        .form-ellipsis-item {
            overflow: hidden; // 隐藏多余行数
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1; // 规定显示几行，其余行数用小数点代替
            -webkit-box-orient: vertical; // 规定为垂直方向排列
        }

        .form-input-content-placeholder-wrap {
            color: #999999;
            font-size: 28rpx;
            flex: 1;
            white-space: nowrap;
        }
    }
}
</style>
